<%layout("/common/layout.html"){%>
<style>
    .cropit-image-preview {
        background-color: #f8f8f8;
        background-size: cover;
        border: 1px solid #ccc;
        border-radius: 20px;
        margin-top: 7px;
        width: 300px;
        height: 400px;
        cursor: move;
        margin-left: auto;
        margin-right: auto;
    }
</style>
<div class="container">

    <div class="col-md-4">

        <div class="panel panel-default">
            <div class="panel-body">
                <div class="row text-center">
                    <h3>最新素材</h3>
                </div>

                <div class="col-sm-12 row">
                    <%for(image in images){%>

                    <div class="col-sm-6">
                        <a href="#" class="thumbnail">
                            <img src="${image.img}" alt="...">
                        </a>
                    </div>

                    <%}%>

                </div>

            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="row text-center">
                    <h2><span class="glyphicon glyphicon-scissors"></span>上传素材</h2>
                </div>

                <div class="image-editor">

                    <div class="row text-center">
                        <input type="file" class="cropit-image-input">
                    </div>


                    <div class="cropit-image-preview"></div>


                    <div class="row">
                        <div class="col-md-4 col-md-offset-4 text-center">
                            <p>调整大小</p>
                            <input type="range" class="cropit-image-zoom-input">
                        </div>
                    </div>

                    <div class="row text-center">
                        <button class="btn btn-primary conform" data-toggle="modal" data-target="#checkInfo">提交</button>
                    </div>

                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="checkInfo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">确认信息</h4>
                </div>

                <!--submit info-->
                <div class="submit-content">
                    <div class="modal-body">

                        <div class="input-group">
                            <span class="input-group-addon" id="title_label">描述</span>
                            <input type="text" id="title" class="form-control" placeholder="该素材的描述"
                                   aria-describedby="title_label">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary export">提交</button>
                    </div>
                </div>

                <!--loading...-->
                <div class="submit-bar" style="display: none">
                    <div class="modal-body">
                        <div class="progress">
                            <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45"
                                 aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                                提交中...
                            </div>
                        </div>
                    </div>
                </div>

                <!--clear...-->
                <div class="submit-clear" style="display: none">
                    <div class="modal-body">
                        <div class="row">
                            <h2>提交成功!</h2>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success" data-dismiss="modal">继续添加</button>
                        <button type="button" class="btn btn-info go-img">去看看</button>
                    </div>
                </div>


                <div class="submit-fail" style="display: none">
                    <div class="modal-body">
                        <div class="row">
                            <h2>提交失败</h2>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">重试</button>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>

<%include("/common/footer.html"){}%>

<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="${ctxPath}/js/jquery.cropit.min.js"></script>
<script src="${ctxPath}/js/nav.js"></script>

<script>
    $(function () {
        $('.image-editor').cropit({
            imageState: {}
        });

        $('.conform').click(function () {
            $('.submit-fail').hide();
            $('.submit-clear').hide();
            $('.submit-content').show();
            $('.submit-bar').hide();
        });

        $('.export').click(function () {
            $('.submit-content').hide('fast');
            $('.submit-bar').show('fast');

            var imageData = $('.image-editor').cropit('export');
            var title = $('#title').val();
            b64 = imageData.substring(22);

            $.post("${ctxPath}/img/addImg",
                    {
                        content: b64,
                        title: title
                    },
                    function (data, status) {
                        if (data.status == true) {
                            $('.submit-content').hide();
                            $('.submit-fail').hide();
                            $('.submit-bar').hide('fast');
                            $('.submit-clear').show('fast');
                        } else {
                            $('.submit-content').hide();
                            $('.submit-clear').hide();
                            $('.submit-bar').hide('fast');
                            $('.submit-fail').show('fast');
                        }
                    });

        });


        $('.go-img').click(function () {
            window.location = "${ctxPath}/img/listAll";
        });
    });
</script>


<%}%>